<template>
  <div>
    <h1>
      nextTick
      <!-- 1.什么情景下用nextTick ,作用是什么.原理是什么 -->
      <!-- 当我需要将一部分逻辑延迟执行的时候.推后执行的时候.就可以用nextTick -->
      <!-- 因为vue中数据更新到视图层的变更异步的,修改了数据,想要获取数据更新之后的dom 就可以使用nextTick -->
    </h1>
    <input ref="searchInput" v-if="showInput" placeholder="" placeholder-class="input-placeholder" @input="" />
    <button @click="openSearch">打开</button>
  </div>
</template>

<script>
// let o = { b: 23 };
// let bValue = 38;
// Object.defineProperty(o, "b", {
//   get () {
//     console.log("get方法劫持")
//     return bValue;
//   },
//   set (newValue) {
//     console.log("set方法劫持", newValue)
//     bValue = newValue;
//   },
//   enumerable: true,
//   configurable: true,
// });
// o.b

export default {
  components: {},
  props: {},
  data () {
    return {
      showInput: true,
      num: 2,
      person: {
        name: "suming"
      }
    }
  },
  computed: {},
  methods: {
    openSearch () {
      this.showInput = !this.showInput; //让输入框显示
      // this.$nextTick(() => {
      //   console.log("this.$refs.searchInput", this.$refs.searchInput);
      //   this.$refs.searchInput.focus()
      // })

      // new Promise((resolve,reject)=>{resolve(111)}).then((res)=>{})
      // nextTick的原理
      setTimeout(() => {
        console.log("this.$refs.searchInput", this.$refs.searchInput);
        this.$refs.searchInput.focus()
      }, 0);

      Promise.resolve().then(() => {
        console.log("this.$refs.searchInput1111", this.$refs.searchInput);
        this.$refs.searchInput.focus()
      })
    }
  },
  created () {
    this.$nextTick(() => {
      console.log("this.$refs.searchInput", this.$refs.searchInput);
    })

  },
  mounted () {

  },
}
</script>
<style scoped></style>